import {designPage} from "plain-design-composition";
import {DemoRow} from "../../Demo/DemoRow";
import {$dialog, $message, Button, Input, useDialog} from "../../../../packages";
import {DemoLine} from "../../Demo/DemoLine";

export const demo1 = designPage(() => {

  const { $dialog } = useDialog();

  return () => (
    <DemoRow title="基本用法">
      <Button label="show dialog message" onClick={() => $dialog('今日即将升级基础架构，线上支付服务将于明日凌晨0点下线。')}/>
    </DemoRow>
  );
});

export const demo2 = designPage(() => {

  const { $dialog } = useDialog();

  return () => (
    <DemoRow title="超长文本，最大宽高">
      <Button label="show dialog message" onClick={() => $dialog({
        message: new Array(100).fill('今日即将升级基础架构，线上支付服务将于明日凌晨0点下线。').join(''),
        maxWidth: '50vw',
        maxHeight: '80vh',
      })}/>
    </DemoRow>
  );
});

export const demo3 = designPage(() => {

  const { $dialog } = useDialog();

  return () => (
    <DemoRow title="状态">
      <DemoLine>
        <Button label="default" onClick={() => $dialog('今日即将升级基础架构，线上支付服务将于明日凌晨0点下线。')}/>
        {/*<Button label="Primary" onClick={() => $dialog({ message: '今日即将升级基础架构，线上支付服务将于明日凌晨0点下线。', status: 'primary' })} status="primary" type="primary"/>*/}
        {/*<Button label="Success" onClick={() => $dialog({ message: '今日即将升级基础架构，线上支付服务将于明日凌晨0点下线。', title: '提交成功', status: 'success' })} status="success" type="primary"/>*/}
        <Button label="Warning" onClick={() => $dialog({ message: '今日即将升级基础架构，线上支付服务将于明日凌晨0点下线。', title: '请先完成登记', status: 'warning' })} status="warning" type="primary"/>
        <Button label="Error" onClick={() => $dialog({ message: '今日即将升级基础架构，线上支付服务将于明日凌晨0点下线。', title: '提交失败', status: 'error' })} status="error" type="primary"/>
        {/*<Button label="Secondary" onClick={() => $dialog({ message: '今日即将升级基础架构，线上支付服务将于明日凌晨0点下线。', title: '系统提示', status: 'secondary' })} status="secondary" type="primary"/>*/}
      </DemoLine>
      <br/>
      <DemoLine>
        {/*<Button label="$dialog.primary" onClick={() => $dialog.primary('今日即将升级基础架构，线上支付服务将于明日凌晨0点下线。')} status="primary" type="primary"/>*/}
        {/*<Button label="$dialog.success" onClick={() => $dialog.success('今日即将升级基础架构，线上支付服务将于明日凌晨0点下线。')} status="success" type="primary"/>*/}
        <Button label="$dialog.warning" onClick={() => $dialog.warning('今日即将升级基础架构，线上支付服务将于明日凌晨0点下线。')} status="warning" type="primary"/>
        <Button label="$dialog.error" onClick={() => $dialog.error('今日即将升级基础架构，线上支付服务将于明日凌晨0点下线。')} status="error" type="primary"/>
        {/*<Button label="$dialog.secondary" onClick={() => $dialog.secondary('今日即将升级基础架构，线上支付服务将于明日凌晨0点下线。')} status="secondary" type="primary"/>*/}
      </DemoLine>
    </DemoRow>
  );
});

export const demo4 = designPage(() => {

  const { $dialog } = useDialog();

  const removeData = async () => {
    await $dialog.confirm('确定要删除该订单信息吗？', { title: '删除确认' });
    console.log('remove');
  };

  return () => (
    <DemoRow title="确认对话框">
      <Button label="删除确认" onClick={removeData}/>
    </DemoRow>
  );
});


export const demo5 = designPage(() => {

  const { $dialog } = useDialog();

  const custom = () => {
    const close = $dialog({
      position: 'right',
      confirmButton: true,
      cancelButton: true,
      width: '400px',
      render: () => <>
        <span>今日即将升级基础架构，线上支付服务将于明日凌晨0点下线。</span>
        <Button label="我知道了" onClick={close}/>
      </>,
      renderFoot: () => <Button label="取消订阅" onClick={close}/>,
    });
  };

  return () => (
    <DemoRow title="自定义参数以及内容">
      <Button label="手动关闭" onClick={custom}/>
    </DemoRow>
  );
});

export const demo6 = designPage(() => {

  const { $dialog } = useDialog();

  const newDlg = async () => {
    await $dialog({
      render: () => <>
        <span>今日即将升级基础架构，线上支付服务将于明日凌晨0点下线。</span>
        <br/>
        <br/>
        <Button block label="新弹框" onClick={newDlg}/>
        <br/>
        <Button block label="关闭所有弹框服务" onClick={() => $dialog.closeAll()}/>
      </>
    });
  };

  return () => (
    <DemoRow title="多实例&关闭所有对话框">
      <Button label="新弹框" onClick={newDlg}/>
    </DemoRow>
  );
});

export const demo7 = designPage(() => {
  return () => (
    <DemoRow title="默认的关闭按钮">
      <Button label="square close button" onClick={() => {
        $dialog({
          closeType: null as any,
          render: () => <>
            <span>今日即将升级基础架构，线上支付服务将于明日凌晨0点下线。</span>
          </>
        });
      }}/>
    </DemoRow>
  );
});


export const demo_1 = designPage(() => {

  const { $dialog } = useDialog();

  const showDialog = () => {
    $dialog({
      onClose: () => {$message('close');},
      render: () => (
        <>
          <Input modelValue="hello world"/>
          <br/>
          <Button label="open dialog" block onClick={showDialog}/>
        </>
      )
    });
  };

  return () => (
    <DemoRow title="监听onClose">
      <Button label="open dialog" onClick={showDialog}/>
    </DemoRow>
  );
});


export const demo_9 = designPage(() => {

  const { $dialog } = useDialog();

  const showDialog = $dialog.useHoldDialog({
    render: () => (
      <>
        <Input modelValue="hello world"/>
        <br/>
        <Button label="open dialog" block onClick={showDialog}/>
      </>
    )
  });

  return () => (
    <DemoRow title="占用服务实例">
      <p>会保留持有dialog组件实例，关闭的时候不会销毁内容，其他地方在复用组件服务的时候会略过被持有的dialog实例</p>
      <p>需要保留option，不能每次用新的option来调用</p>
      <p>当页面销毁的时候，会自动销毁持有的dialog服务实例</p>
      <Button label="open dialog" onClick={showDialog}/>
    </DemoRow>
  );
});

export const demoInput = designPage(() => {

  let inputValue: string | number | null | undefined = '默认文本';

  return () => (
    <DemoRow title={'输入对话框'}>
      <Button label={'input'} onClick={() => $dialog({
        editType: 'input',
        editValue: inputValue,
        handleConfirm: ({ editValue }) => {
          inputValue = editValue;
          $message(String(editValue));
        },
        confirmButton: true,
        cancelButton: true,
      })}/>
      <Button label={'input readonly'} onClick={() => $dialog({
        editType: 'input',
        editValue: inputValue,
        editReadonly: true,
        handleConfirm: ({ editValue }) => {
          inputValue = editValue;
          $message(String(editValue));
        },
        confirmButton: true,
        cancelButton: true,
      })}/>
      <Button label={'textarea'} onClick={() => $dialog({
        editType: 'textarea',
        editValue: inputValue,
        handleConfirm: ({ editValue }) => {
          inputValue = editValue;
          $message(String(editValue));
        },
        confirmButton: true,
        cancelButton: true,
      })}/>
      <Button label={'textarea readonly'} onClick={() => $dialog({
        editType: 'textarea',
        editValue: inputValue,
        editReadonly: true,
        handleConfirm: ({ editValue }) => {
          inputValue = editValue;
          $message(String(editValue));
        },
        confirmButton: true,
        cancelButton: true,
      })}/>
      <Button label={'number'} onClick={() => $dialog({
        editType: 'number',
        editValue: 100,
        handleConfirm: ({ editValue }) => {
          $message(String(editValue));
        },
        confirmButton: true,
        cancelButton: true,
      })}/>
    </DemoRow>
  );
});
